<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh-cn">
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="mobile-agent" content="">
    <meta name="applicable-device" content="pc">
    <meta name="baidu-site-verification" content="4wUHM6SoM3">
    <title>QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
	
	<link rel="stylesheet" href="static/index/css/layout_0412.css">
	<link rel="stylesheet" href="static/index/css/index0913.css">
	<link rel="stylesheet" href="static/index/css/popup_login.css">
	<link rel="stylesheet" href="static/index/css/qb-ie-remind.css">
</head>

<body class="os_mac">
   	<!-- 头部 N -->
		<jsp:include page="musicTop.jsp"></jsp:include>
   	<!-- 头部 S -->
    
    <!-- 热门歌单 -->
    <div class="mod_index mod_index--hot mod_slide_box mod_bg" id="taogelist_box">
        <div class="section_inner">
            <div class="index__hd">
                <h2 class="index__tit"><i class="icon_txt">歌单推荐</i></h2>
            </div>
            <!-- 切换 -->
            <div class="mod_playlist mod_slide">
                <ul class="playlist__list slide__list" style="left: -100%;">
                    <li class="playlist__item slide__item"></li>
                    <li class="playlist__item slide__item"></li>
                    <li class="playlist__item slide__item"></li>
                    <li class="playlist__item slide__item"></li>
                    <li class="playlist__item slide__item"></li>

				<!-- 第一个开始 -->
				<!-- 循环遍历歌单 -->
				<c:forEach items="${songsList}" var="songs">
		            <li class="playlist__item slide__item">
                        <div class="playlist__item_box">
                            <div class="playlist__cover mod_cover">
                                <a href="front/songs_list1?musicId=${songs.musicId}&musicListName=${songs.musicListName}" class="js_playlist">
                                    <img src="${songs.musicListPhoto}" class="playlist__pic"><i class="mod_cover__mask"></i><i class="mod_cover__icon_play js_play" ></i>
                                </a>
                            </div>
                            <h4 class="playlist__title">
                                <span class="playlist__title_txt"><a href="front/songs_list1?musicId=${songs.musicId}&musicListName=${songs.musicListName}" class="js_playlist">${songs.musicListName}</a></span>
                            </h4>
                            <div class="playlist__other">
                            	  播放量：21.0万
                            </div>
                        </div>
                    </li>
                 </c:forEach>
                    <!-- 第一个结束 -->
                    <!-- 循环遍历歌单 -->
                 </ul>
            </div>
        </div>
        
    </div>
    
    
    <!-- 新歌首发 -->
    <div class="mod_index mod_index--song mod_slide_box js_box mod_bg" id="new_song_box">
        <div class="section_inner">
            <div class="index__hd">
                <h2 class="index__tit"><i class="icon_txt">新歌首发</i></h2>
            </div>
            <!-- 切换 -->
            <div class="mod_songlist mod_slide">
                <div class="slide__list js_list" style="left: -100%;">
	        	<ul class="songlist__list"></ul>
				<ul class="songlist__list">
		 			<c:forEach items="${singersList}" var="singer">
                        <li class="songlist__item">
							<div class="songlist__item_box" style="visibility: visible;">
                                <a href="#" class="album_name songlist__link mod_cover">
                                    <!--<img class="songlist__pic" src="#" style="display: block; visibility: visible;"> -->
                                    <video id="my-video" class="video-js" controls preload="auto" 
											         width="100" 
													 height="100"
													 poster="${singer.musicPhoto }" >
										        	<source src="${singer.musicMp3 }" type="video/mp4">
									</video>
                                    <!--<i class="mod_cover__mask"></i>-->
                                    <!--<i class="mod_cover__icon_play js_play"></i>-->
                                </a>
                                <div class="songlist__cont">
                                    <h3 class="songlist__song"><a class="js_song">${singer.musicName}</a></h3>
                                    <p class="songlist__author">
										<a href="singer/list2?musicId=${singer.musicId }&singerId=${singer.singerId}" class="c_tx_thin singer_name">${singer.singerName}</a>
                                    </p>
                                </div>
                                <div class="songlist__time c_tx_thin">${singer.timeLength}</div>
                            </div>
                        </li>
            		</c:forEach>
            	</ul>
				</div>
			</div>
		</div>
    </div>
    <!-- 精彩推荐 -->
    
    <!-- 新碟首发 -->
    <div class="mod_index mod_index--album mod_slide_box mod_bg js_box" id="new_album_box" style="display:;">
        <div class="section_inner">
            <div class="index__hd">
                <h2 class="index__tit"><i class="icon_txt">新碟首发</i></h2>
            </div>
            <!-- 切换 -->
            <div class="mod_playlist mod_slide">
                <div class="slide__list js_list" style="left: -100%;">
					<ul class="playlist__list"></ul>
					<ul class="playlist__list">
		 				<c:forEach items="${xindieList }" var="xindie">
	                        <li class="playlist__item slide__item ">
	                            <div class="playlist__item_box">
	                                <div class="playlist__cover mod_cover" style="visibility: visible;">
	                                   <a href="special/list2?musicId=${xindie.musicId }&specialId=${xindie.specialId}"><img src="${xindie.specialPhoto}" class="playlist__pic" style="display: block; visibility: visible;">
		                                   <i class="mod_cover__mask"></i>
		                                   <i class="mod_cover__icon_play js_play" ></i>
	                                   </a>
	                                </div>
	                                <h4 class="playlist__title">
										<span class="playlist__title_txt">
										<a href="special/list2?musicId=${xindie.musicId }&specialId=${xindie.specialId}">${xindie.specialName}</a>
										</span>
									</h4>
									<div class="playlist__author">
										<a href="singer/list2?musicId=${xindie.musicId }&singerId=${xindie.singerId}">${xindie.singerName}</a>
									</div>
	                            </div>
	                        </li>
						</c:forEach>      
					</ul>
				</div>
            </div>
        </div>
    </div>

    <!-- 排行榜 -->
    
    <!-- MV -->
   <div class="mod_index mod_index--mv mod_slide_box mod_bg js_box" id="mv_box" style="">
        <div class="section_inner">
            <div class="index__hd">
                <h2 class="index__tit"><i class="icon_txt">MV首播</i></h2>
            </div>

     		<div class="mod_mv mod_slide">
     			<div class="slide__list js_list" style="left: -100%;">
	 				<ul class="mv_list__list"></ul>
	 				<ul class="mv_list__list">
					   <!-- 第一个开始 -->
					   <!-- 循环遍历mv -->
						<c:forEach items="${mvList}" var="mv">
						    <li class="mv_list__item">
								<div class="mv_list__item_box" style="visibility: visible;">
									<!--<img class="mv_list__pic" src="#" style="display: block; visibility: visible;">-->
									<video id="my-video" class="video-js" controls preload="auto" 
											width="224" 
											height="126.65"
											poster="${mv.mvPhoto }" >
										<source src="${mv.mvMp4 }" type="video/mp4">
									</video>
									<h3 class="mv_list__title"><a>${mv.mvName }</a></h3>
									<p class="mv_list__singer">
										<a href="singer/list2?musicId=${mv.musicId }&singerId=${mv.singerId}">${mv.singerName }</a>
									</p>
									<div class="mv_list__info">
										<span class="mv_list__listen"><i class="mv_list__listen_icon sprite"></i>9.3万</span>
									</div>
								</div>
						    </li>
						</c:forEach>
					   <!-- 第一个结束 -->
					   <!-- 循环遍历mv -->
					 </ul>
				</div>
            </div>
        </div>
    </div>
    <!-- 尾部 N -->
		<jsp:include page="musicFoot.jsp"></jsp:include>
	<!-- 尾部 S -->

</body>
</html>

